<template>

  <div class="search">
    <Modal v-model="modalVisible" :title="modalTitle" width="40" @on-visible-change="handleModalChange">
      <Tabs @on-click="handleTabClick" :value="current">
        <TabPane label="基本信息" name="form1">
          <role-info ref="form1" :parent-visable.sync="modalVisible"></role-info>
        </TabPane>
        <TabPane :disabled="!isEdit" label="功能授权" name="form2">
          <role-auth ref="form2"></role-auth>
        </TabPane>
        <TabPane :disabled="!isEdit" label="成员列表" name="form3">
          <role-user ref="form3"></role-user>
        </TabPane>
      </Tabs>
      <div class="drawer-footer">
        <Button type="default" @click="handleModalChange(false)">取消</Button>&nbsp;
        <Button type="primary" @click="handleSubmit" :loading="saving">保存</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import RoleInfo from './form/role-info'
import RoleUser from './form/role-user'
import RoleAuth from './form/role-auth'

export default {
  name: 'RoleModal',
  components: { RoleInfo, RoleAuth, RoleUser },
  props: {},
  data () {
    return {
      saving: false,
      modalVisible: false,
      isEdit: false,
      modalTitle: '',
      current: 'form1',
      roleName: '',
      formData: {},
      forms: [
        'form1',
        'form2',
        'form3'
      ]
    }
  },
  methods: {
    handleShow (data, current) {
      this.isEdit = false
      this.roleName = ''
      if (data && data.roleId) {
        this.isEdit = true
        this.roleName = data.roleName
        this.formData = data
      } else {
        this.formData = {}
      }
      if (current) {
        this.handleTabClick(current)
      } else {
        this.handleTabClick('form1')
      }
      this.modalVisible = true
    },
    handleModalChange (visible) {
      if (!visible) {
        this.$refs[this.current].handleReset()
        this.modalVisible = false
        this.$emit('reloadTable')
      }
    },
    handleSubmit () {
      this.saving = true
      this.$refs[this.current].handleSubmit().then(res => {
        if (res) {
          this.handleModalChange(false)
        }
      }).finally(() => {
        this.saving = false
      })
    },
    handleTabClick (name) {
      this.current = name
      this.modalTitle = this.isEdit ? `编辑角色 - ${this.roleName}` : '新增角色'
      this.$refs[this.current].setData(this.formData)
    }
  },
  created () {

  }
}
</script>

<style scoped lang="less" rel="stylesheet/less">

</style>
